<template>
  <div>
    <el-dialog :close-on-click-modal="false" :title="text" style="text-align: left" :visible.sync="popup" v-if="popup" width="50%">
      <div class="form-layer" v-loading="loading">
<!--        旧-->
        <!-- <span style="color:rgba(0,0,0,.6);">2021届{{urlData.majorName}}专业</span> -->
<!--        <div class="key-layer tp-clear">-->
<!--           <el-divider v-if="formData && formData.informations && formData.informations.length < 1">暂无人员</el-divider>-->
<!--          <p class="list-key" v-for="(item,index) in formData.informations" :key="index">{{item.studentName}}</p>-->
<!--        </div>-->
        <!-- <el-form label-width="100px" class="demo-ruleForm" size="mini">
          <el-form-item label="分配宿舍">
            <p><span v-for="(item,index) in conData" :key="index">{{item.buildname}}<em v-if="index < conData.length-1">、</em></span></p>
          </el-form-item>
        </el-form> -->

<!--        新2022.7.6-->
        <div style="width: 100%;height: 30px">
          <span style="margin-left: 30px;line-height: 30px;">
            当前{{status=='1'?'报名':'签到'}}人数：{{room}}
          </span>
            <el-button style="float: right" class="m-r" size="small" type="primary" @click="handleExcel">导出</el-button>
        </div>
        <el-table :data="tableData" stripe class="tp-best">
          <el-table-column show-overflow-tooltip align="center" prop="userName" label="姓名"></el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="sex" label="性别">
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="tel" label="电话"></el-table-column>
          <el-table-column show-overflow-tooltip align="center" :prop="status=='1'?'bmDate':'qdDate'" :label="status=='1'?'报名时间':'签到时间'"></el-table-column>

        </el-table>
      </div>
        <!-- 分页 -->
        <div class="property-page" style="float: left; margin-top: 16px">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Number(total)"
            >
            </el-pagination>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="popup = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import publicData from "@/assets/mixins/publicData";
  import { deleteStuForDormitory,activityRecord,recordExport } from '@A/services/infoServices';
  import { urlExport } from "../../../../assets/resource/until";
  export default {
    name: "viewDetails",
    mixins:[ publicData ],
    components: {},
    data(){
      return{
        activeName: '1',
          pageNum: '1',
          pageSize: '10',
          total:'0',
        majorId: '',
          status: '',
          bedCode: '',
        room: '',
        conData: '',
        formData: {
        },
        urlData: '',
        tableData:[],
      };
    },
    mounted(){
    },
    methods:{
        handleExcel() {
            let p = Object.assign({}, this.formData );
            recordExport(p).then( res => {
                if (res) {
                    urlExport(res, this.text+'信息')
                }
            })
        },
      async openDialog(name,val) {
        this.urlData = JSON.parse(val);
          this.text = name;
          if(this.text=='报名列表'){
              this.status = '1'
              this.room =  this.urlData.signUp;
          }
          if(this.text=='签到列表'){
              this.status = '2'
              this.room =  this.urlData.register;
          }
          this.formData=  {
              id:this.urlData.id,
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              status:this.status,
          };

        this.init();


        this.popup = true;
        this.loading = false;
      },
      async init(){
          this.tableData=[]
        // this.conData = await dormDistributiondet({majorId: this.majorId,dormType: this.activeName});
          let d = await activityRecord(this.formData);
          this.tableData = d.list;
          this.total = d.total;
      },
        handleSizeChange() {
            this.init();
        },
        handleCurrentChange() {
            this.init();
        },
      handleClick() {
        this.init();
      },
        async querySubmit(){
          this.tableData = await getStuByDormitoryId({dormitoryId: this.urlData.id});
      },
      // 移除
      delSubmit(val){
        this.$confirm('是否确认此操作？', '', {
          distinguishCancelAndClose: true,
          cancelButtonText: '取消',
          confirmButtonText: '确认',
          cancelButtonClass: 'right-btn', // 取消按钮类名
          confirmButtonClass: 'right-btn' // 确定按钮类名
        })
                .then(() => {
                    deleteStuForDormitory({stuidentity: val}).then( res => {
                    if(res){
                      this.$message({
                        message: res,
                        type: 'success'
                      });
                      this.querySubmit();
                    }
                  })
                })
                .catch(action => {
                  this.$message({
                    type: 'info',
                    message: '取消删除'
                  })
                });
      },

    },
  }
</script>

<style lang="scss" scoped>
.form-layer{
  width: 100%;
  .form-list{
    width: 100%;
    display: flex;
    padding: 6px 10px;
    box-sizing: border-box;
    line-height: 30px;
  }
  .key-layer{
    width: 100%;
    .list-key{
      float: left;
      width: 18%;
      color: rgba(96, 98, 102, 1);
      font-size: 14px;
      text-align: center;
      line-height: 42px;
      box-sizing: border-box;
      background: #F5F7FA;
      margin: 5px 1%;
      border-radius: 2px;
    }
  }
}
</style>
<style scoped>
/deep/.el-dialog{
  min-width: 550px;
}
/deep/.el-dialog__body{
  padding: 10px;
}
</style>
